<template>
  <div>
    <table border="1" width="700" style="border-collapse: collapse">
      <caption>
        购物车
      </caption>
      <thead>
        <tr>
          <th><input type="checkbox" v-model="isAll" /> <span>全选</span></th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <Tr
          v-for="(item, index) in goodList"
          :key="item.id"
          :item="item"
          :index="index"
        ></Tr>
      </tbody>
      <tfoot>
        <!-- <tr>
          <td>合计:</td>
          <td colspan="5"></td>
        </tr> -->
        <All :list="goodList"></All>
      </tfoot>
    </table>
    商品名称：<input type="text" placeholder="商品名称" v-model="obj.name" />
    <br />
    商品价格：<input
      type="text"
      placeholder="商品价格"
      v-model="obj.price"
    /><br />
    商品数量：<input type="number" v-model.number="obj.num" /><br />
    <button @click="addBtn">添加</button>
  </div>
</template>

<script>
import Tr from "./components/Tr.vue";
import All from "./components/Allprice.vue";
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      obj: {
        name: "",
        price: "",
        num: 0,
      },
    };
  },
  methods: {
    ...mapMutations(["addFn"]),
    addBtn() {
      console.log(this.obj);
      this.addFn(this.obj);
    },
  },
  computed: {
    ...mapState(["goodList"]),
    isAll: {
      set(val) {
        this.goodList.forEach((item) => (item.checked = val));
      },
      get() {
        return this.goodList.every((item) => item.checked);
      },
    },
  },
  components: {
    Tr,
    All,
  },
};
</script>

<style>
</style>